<template>
    <!--电销管理 待处理-->
    <div class="content_panel project_modules">
        <div class="content_panel_top">
            <h3 class="panel_title">
                <span>{{$t('salesManage.pending')}}</span>
            </h3>
            <el-form ref="form" :model="form" :rules="rules" :inline="false" class="module_form">
                <el-row :gutter="20">
                    <el-col :span="4">
                        <el-form-item prop="realName"><!--姓名-->
                            <el-input v-model="form.realName" :placeholder="$t('common.name')" type="text" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item prop="phone"><!--手机号-->
                            <el-input v-model="form.phone" :placeholder="$t('common.mobileNumber')" type="text" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item prop="batchCode"><!--批次号-->
<!--                            <el-input v-model="form.batchCode" :placeholder="$t('salesManage.batchNumber')" type="text" clearable></el-input>-->
                            <el-select v-model="form.batchCode"  :placeholder="$t('salesManage.batchNumber')" clearable  multiple collapse-tags style="width: 100%;">
                                <el-option v-for="code in batchCodeList" :key="code" :value="code" :label="code"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item prop="distributionTime" label=""><!--分派时间-->
                            <el-date-picker
                                    v-model="form.distributionTime"
                                    type="datetimerange"
                                    format="yyyy-MM-dd HH:mm:ss"
                                    value-format="timestamp"
                                    :editable="false"
                                    range-separator="-"
                                    :start-placeholder="$t('common.dispatchStartTime')"
                                    :end-placeholder="$t('common.dispatchEndTime')"
                                    :default-time="['00:00:00', '23:59:59']"
                                    class="el-select"
                                    style="width:100%;"
                                    clearable>
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item prop="marketingType">
                            <el-select v-model="form.marketingType" @change="handleMarketTypeChange" :placeholder="$t('salesManage.marketingType')" clearable style="width: 100%"><!--营销类型-->
                                <el-option v-for="item in keyMap.marketingType()" :key="item.value" :value="item.value" :label="item.label"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="4">
                        <el-form-item prop="appName">
                            <select-app-list v-model="form.appName" :placeholder="$t('common.ownedApp')"></select-app-list><!--所属APP-->
                        </el-form-item>
                    </el-col>
                    <el-col v-if="roleId === 2||roleId === 3" :span="4">
                        <el-form-item prop="salesmanName"><!--电销员-->
                            <el-input v-model="form.salesmanName" :placeholder="$t('salesManage.salesman')" type="text" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col  v-if="roleId === 3" :span="4">
                        <el-form-item prop="salesmanGroupName"><!--电销小组-->
                            <el-select v-model="form.salesmanGroupName" :placeholder="$t('salesManage.salesTeam')" clearable style="width:100%;">
                                <el-option v-for="item in captainList" :key="item.username" :value="item.username" :label="item.username"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-button @click="search" type="primary">{{ $t('common.search') }}</el-button>
                        <el-button v-if="roleId===3" @click="exportExcel" type="primary">{{ $t('common.export') }}</el-button>
                    </el-col>
                </el-row>
            </el-form>
        </div>

        <div class="module_content">
            <div class="content_panel project_modules">
                <div class="table_list">
                    <div class="userInfo">{{$t('salesManage.willDealTotal')}}:{{totalRecord}}</div>
                    <el-table ref="dataTable" :row-class-name='tableRowClassName' :data="tableData" :max-height="tableMaxHeight" style="width: 100%;margin-top:10px;">
                        <el-table-column prop="phone"  :label="$t('common.mobileNumber')" min-width="130">
                            <template slot-scope="{$index, row }">
                                <a @click="goDetail(row,$index)" type="text" size="small" v-if="row.phone" href="javascript:void(0);">{{ row.phone }}</a>
                            </template>
                        </el-table-column><!--手机号码-->
                        <el-table-column prop="realName" :label="$t('common.name')" min-width="180"></el-table-column><!--姓名-->
                        <el-table-column prop="marketingType" :label="$t('salesManage.marketingType')" min-width="120">
                            <template slot-scope="{ row }">{{ keyMap.marketingType(row.marketingType) }}</template>
                        </el-table-column><!--营销类型-->
<!--                        <el-table-column prop="userType" :label="$t('common.userType')" min-width="100">
                            <template slot-scope="scope">{{ scope.row.userType | UserTypeTelSales }}</template>
                        </el-table-column>&lt;!&ndash;用户类型&ndash;&gt;-->
<!--                        <el-table-column prop="extraInformation" :label="$t('salesManage.informationAdditional')" :show-overflow-tooltip="true" min-width="120"></el-table-column>&lt;!&ndash;补充信息&ndash;&gt;-->
                        <!--备注-->
                        <el-table-column prop="recordRemark" :label="$t('common.remark')" :show-overflow-tooltip="true" min-width="100">
                            <template slot-scope="{ row }">
                                {{!row.recordRemark?'--':row.recordRemark}}
                            </template>
                        </el-table-column>
                        <el-table-column prop="distributionTime" :label="$t('tel.timeDispatch')" min-width="170">
                            <template slot-scope="scope">{{ scope.row.distributionTime | formatDate('yyyy-MM-dd hh:mm:ss') }}</template>
                        </el-table-column><!--分派时间-->
                        <el-table-column v-if="roleId===2||roleId===3" prop="salesmanName" key="salesmanName" :label="$t('salesManage.salesman')" min-width="180" ></el-table-column><!--电销员-->
                        <el-table-column prop="batchCode" :label="$t('salesManage.batchNumber')" min-width="180"></el-table-column><!--批次号-->
                        <el-table-column prop="appName" :label="$t('common.ownedApp')" min-width="120">
                            <template slot-scope="{ row }">{{ row.appName | switchAppName }}</template>
                        </el-table-column><!--所属APP-->
                        <el-table-column prop="productName" :label="$t('finance.productName')" min-width="180"></el-table-column><!--产品名-->
                        <el-table-column prop="couponUrl" :label="$t('common.coupons')" min-width="180">
                            <template slot-scope="{ row }">{{!row.couponUrl?'--':row.couponUrl}}</template>
                        </el-table-column><!--优惠券-->
                        <el-table-column v-if="roleId===3" prop="salesmanGroupName" key="salesmanGroupName" :label="$t('salesManage.salesTeam')" min-width="180"></el-table-column><!--电销小组-->
                        <!--导入备注-->
                        <el-table-column prop="remark" :label="$t('common.importRemark')" :show-overflow-tooltip="true" min-width="100">
                            <template slot-scope="{ row }">{{!row.remark?'--':row.remark}}</template>
                        </el-table-column>
                    </el-table>
                    <!-- 分页组件 -->
                    <pagination @pageChange="pageChange" :page="page"></pagination>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
    import Pagination from '@/components/pagination';
    import mixin from '@/service/mixin';
    import mixinTM from './mixin/mixin-tel-manage';
    import keyMap from '@/config/key-map';
    import SelectAppList from '@/components/select-app-list';

    export default {
        name: 'telemarketing-telManage-pending',
        components: {
            Pagination,
            SelectAppList,
        },
        mixins: [mixin, mixinTM],
        data() {
            return {
                keyMap,
                userStorage:this.$storage.get("user"),
                roleId: 0, //客服员角色 0：待分配 1：客服专员  2：主管 3-经理
                form: {
                    currentStatus:1,  //1 待处理 2 已处理  3 已达成  4 已失效
                    phone: '',
                    realName: '',
                    batchCode: [],
                    distributionTime: [],
                    salesmanName: '',
                    salesmanGroupName: '',
                    marketingType: '',
                    appName: '',
                },
                totalRecord: '',
                problemDesc: '',
                detailShow: false,
                changeSearchFlag: false,
                rules: {
                    phone: [
                        {pattern: /^\d+$/, message: this.$t('verify.plsInputNumber')},
                    ]
                },
                bindPNVisible: false,
                gridData: [],
                captainList:[],
                batchCodeList: [], // 批次号列表
            };
        },
        methods: {
            tableRowClassName({row}){
                if(row.register){
                    return 'warning-row'
                }
            },
            handleMarketTypeChange(val) {
                this.batchCodeList = [];
                this.form.batchCode = [];
                if (val) {
                    const params = {
                        marketingType: val, // 营销类型 1 还款未复借，2白名单
                        currentStatus: '1', // 当前状态 1 待处理 2 已处理
                    };
                    this.$api.telSales.getUserBatchCodeList(params).then(res => {
                        const { status, data } = res;
                        if ('1' === status) {
                            this.batchCodeList = data.data;
                        }
                    });
                }
            },
        },
        created() {
            //电销详情下一个带搜索条件
            this.$storage.set('willDetail', this.form);
            this.getCaptainList();
            this.getUserInfo();
            // this.getTableData();
        }
    }
</script>
<style lang="scss">
    [data-page=telemarketing-telManage-pending] {
        .el-table .cell, .el-table th > .cell {
            word-break: keep-all;
            word-wrap: break-word;
            
            
            
        }
        .el-button {
            margin-bottom: 18px
        }
        .warning-row{
             color: #a30014 !important;
             a{
               color: #a30014 !important;
             }
        }
        .el-table__row {
            .el-button {
                margin-bottom: 0px
            }
        }
    }
</style>

